@import "mixin";

/**
 * 通用样式
 */
$font-42: 42px;
$font-F1: 36px;
$font-F2: 34px;
$font-F3: 30px;
$font-F4: 28px;
$font-F5: 26px;
$font-F6: 24px;
$font-F7: 22px;
$color-C1: #282828;
$color-C2: #bbbbbb;
$color-C3: #e6e6e6;
$color-C4: #737373;
$color-C5: #a8a8a8;
$color-C6: #f56d9d;

.line-index {
    width: 100%;
    @include px2rem(height, 20px);
    background-color: #f5f5f5;
    border-top: 1px solid $color-C3;
}
.border-bottom {
    border-bottom: 1px solid $color-C3;
}

.wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.content {
    position: absolute;
    // top: 1.2rem;
    top:0;
    left: 0;
    right: 0;
    bottom: 1.32rem;
    overflow: auto;
    @include css3(overflow-scrolling, touch);
    @include css3(user-select, none);
    background-color: #f5f5f5;
}
.payResult {
    bottom: 0;
    background-color: #ffffff;
}
.title {
    width: 100%;
    @include px2rem(height,36px);
    @include px2rem(line-height,36px);
    @include px2rem(font-size,$font-F1);
    padding: 0.36rem 0;
    text-align: center;
    position: relative;
    border-bottom: 1px solid $color-C3;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background-color: #ffffff;
}
.title span {
    @include px2rem(width,42px);
    @include px2rem(height,36px);
    background-image:url(../img/nav_back_ico@3x.png);
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    background-size: cover;
    bottom: 0.36rem;
    left: 0.52rem;
}
// ios
.ios .content {
    top: 1.6rem;
}
.ios .title {
    padding: 0.76rem 0 0.36rem 0; 
}
.pay-tips {
    width: 100%;
    @include px2rem(height,27px);
    @include px2rem(line-height,27px);
    padding: 0.28rem 0;
    text-indent: 0.52rem;
    @include px2rem(font-size,$font-F6);
    color: $color-C6;
    background-color: #FFF4F7;
}
.pay-box {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    overflow: hidden;
}
.pay-row {
    margin: 0 0.52rem;
    width: auto;
    @include px2rem(height,39px);
    @include px2rem(line-height,39px);
    padding: 0.4rem 0;
    @include px2rem(font-size,$font-F4);
    color: $color-C1;
}
.pay-list {
    margin: 0 0.52rem;
    width: auto;
    height: auto;
    overflow: hidden;
    padding-bottom: 0.4rem;
}
.pay-list li {
    width: 100%;
    @include px2rem(height, 120px);
    border-bottom: 1px solid $color-C3;
}
.pay-list span {
    display: block;
}
.pay-list .pay-wx-logo {
    @include px2rem(width, 72px);
    @include px2rem(height, 66px);
    background-image:url(../img/order_pay_wechat_ico@3x.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0.36rem 0.24rem;
}
.pay-list .pay-bankCard-logo {
    @include px2rem(width, 72px);
    @include px2rem(height, 48px);
    background-image:url(../img/order_pay_unionpay_ico@3x.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0.48rem 0.24rem;
}
.pay-list .pay-alipay-logo {
    @include px2rem(width, 72px);
    @include px2rem(height, 60px);
    background-image:url(../img/order_pay_alipay_ico@3x.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0.4rem 0.24rem;
}
.pay-list .pay-balance-logo {
    @include px2rem(width, 72px);
    @include px2rem(height, 66px);
    background-image:url(../img/order_pay_cash_ico@3x.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0.36rem 0.24rem;
}
.pay-list .pay-newCard-logo {
    @include px2rem(width, 72px);
    @include px2rem(height, 66px);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0.36rem 0.24rem;
}
.pay-item-text {
    @include px2rem(width,480px);
    @include px2rem(height,36px);
    @include px2rem(line-height,36px);
    padding: 0.56rem 0;
    @include px2rem(font-size,$font-F4);
    color: $color-C1;
    overflow: hidden;
}
.pay-item-radio {
    @include px2rem(width,36px);
    @include px2rem(height,36px);
    border-radius: 50%;
    margin: 0.56rem 0.2rem;
    background-image:url(../img/work_details_contact_chioce_ring@3x.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}
.pay-item-wait .pay-item-text {
    color: $color-C5;
}
.pay-item-wait .pay-item-radio {
    display: none;
}
.pay-list .pay-balance-value {
    display: inline;
}
.pay-item-active .pay-item-radio {
    background-image:url(../img/work_details_contact_chioce_right@3x.png);
}
.pay-batch {
    display: block;
    @include px2rem(width,634px);
    @include px2rem(height,36px);
    @include px2rem(line-height,36px);
    padding: 0.24rem 0;
    color: $color-C6;
    @include px2rem(font-size, $font-F4);
    margin: 0 auto;
    border: 1px solid $color-C6;
    text-align: center;
    border-radius: 3px;
    margin-bottom: 0.4rem;
}
.bottom {
    position: absolute;
    bottom: 0;
    height: 1.32rem;
    width: 100%;
    background-color: #ffffff;
    overflow: hidden;
}
.pay-btn {
    display: block;
    @include px2rem(width,690px);
    @include px2rem(height,39px);
    padding: 0.2rem 0;
    background-color: #393939;
    color: #ffffff;
    @include px2rem(font-size, $font-F3);
    @include px2rem(line-height,39px);
    text-align: center;
    @include px2rem(border-radius,35px);
    margin: 0.2rem auto;
}

/* 身份认证支付 */
.pay-balance {
    display: none;
}
.pay-newCard {
    display: none;
}
.pay-newCard .pay-item-text {
    color: $color-C6;
}


/* 支付结果 */
.payResult-success {
    width: 100%;
    height: auto;
    display: none;
}
.payResult-icon {
    @include px2rem(width, 339px);
    @include px2rem(height, 339px);
    overflow: hidden;
    background-image:url(../img/order_details_pay_success_ico@3x.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0.8rem auto 0.36rem auto;
}
.payResult-h3 {
    width: auto;
    height: auto;
    margin-bottom: 0.36rem;
    @include px2rem(font-size,$font-F1);
    color: $color-C6;
    text-align: center;
    font-weight: bold;
}
.payResult-p {
    width: auto;
    height: auto;
    margin-bottom: 0.64rem;
    @include px2rem(font-size,$font-F6);
    color: $color-C5;
    text-align: center;
}
.payResult-p span {
    color: $color-C6;
    font-weight: bold;
}
.payResult-overplus {
    color: $color-C6;
}
.payResult-wait {
    margin-top: 2rem;
}
.loader {
    width:30%;
    height:200px;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    margin: 0 auto;
}
.loading-2 {
    width:40px;
    height:40px;
    position:relative;
    margin: 0 auto;
}
.loading-2 i {
    display:block;
    border:2px solid #333;
    border-color:transparent #333;
    border-radius:50%;
    position:absolute;
}
.loading-2 i:first-child {
    width:35px;
    height:35px;
    top:0;left:0;
    -webkit-animation:loading-2 1s ease-in-out 0s infinite;
}
.loading-2 i:last-child {
    width:15px;
    height:15px;
    top:10px;
    left:10px;
    -webkit-animation:loading-2 1s ease-in-out .5s infinite reverse;
}
@-webkit-keyframes loading-2 {
    0%{transform:rotate(0) scale(1)}
    50% {transform:rotate(180deg) scale(.6)}
    100% {transform:rotate(360deg) scale(1)}
}